<template>
	<view class="">
		<!-- <image class="receipt-for-collection" src="https://hkb.zanboon.com/electronic/elect_2055.jpg" mode=""></image> -->
		<image class="receipt-for-collection" :src="infoImage" @longpress="abc" mode=""></image>
		<!-- #ifdef H5 -->
		<!-- <button class="receipt-for-collection-btn" @click="keepReceipt">保存收据</button> -->
		<view class="text">长按图片保存</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<button class="receipt-for-collection-btn" @click="keepReceipt">保存收据</button>
		<!-- #endif -->
		<!-- <button class="receipt-for-collection-btn" @click="keepReceipt">保存收据</button> -->
	</view>
</template>

<script>
	
	//#ifdef H5
		// import html2canvas from 'html2canvas'
	//#endif
	export default {
		data() {
			return {
				orderId:'',
				imgUrl:'',
				infoImage:'',
			}
		},
		onLoad(options){
			let order_id = parseInt(options.order_id,10);
			console.log('进入了onload 获取url的order_id',order_id)
			this.orderId = order_id
			this.getReceipt()
		},
		filters:{
			formatDates(value) {
				let date = new Date(value * 1000);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return y + '-' + MM + '-' + d;
			}
		},
		methods: {
			abc(){
				console.log("987")
			},
			// 获取电子收据
			getReceipt(){
				let data  = {
					token:this.$store.getters.getToken,
					order_id:this.orderId,
				}
				console.log(data,"？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？");
				this.$api.get_receipt(data).then(res => {
					console.log(res)
					if(res.status){
						this.infoImage = res.data
						console.log(this.infoImage,"？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？");
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// #ifdef MP-WEIXIN
				// 保存图片
				keepReceipt(){
					let that = this
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success() {
							console.log(that.infoImage);
							uni.showModal({
								title: '提示',
								content: '确定保存到相册吗',
								success: function (res) {
									if (res.confirm) {
										uni.downloadFile({
											url: that.infoImage,//图片地址
											success: (res) =>{
												if (res.statusCode === 200){
													uni.saveImageToPhotosAlbum({
														filePath: res.tempFilePath,
														success: function() {
															uni.showToast({
																title: "保存成功",
																icon: "none"
															});
														},
														fail: function() {
															uni.showToast({
																title: "保存失败",
																icon: "none"
															});
														}
													});
												} 
											},
											fail: function() {
												uni.showToast({
													title: "保存失败",
													icon: "none"
												});
											}
										})
									} else if (res.cancel) {
										
									}
								},
								fail: function() {
									uni.showToast({
										title: "保存失败",
										icon: "none"
									});
								}
							});
						},
						fail() {
							uni.showModal({
								content: '拒绝授权相册权限后无法成功保存海报，是否重新授权？',
								confirmColor: '#00A66A',
								success: function (res) {
									if (res.confirm) {
										uni.openSetting({
											success(res) {
												console.log(res.authSetting)
											}
										});
									} else if (res.cancel) {
										
									}
								}
							})
						}
					})
				},
			// #endif
			// #ifdef H5
				keepReceipt(){
					this.abc()
					console.log(document.getElementsByClassName('receipt-for-collection'))
					html2canvas(document.getElementsByTagName('img')).then(canvas => {
						var url = canvas.toDataURL();
						this.imgUrl = url
						let a = document.createElement("a");
						a.href = url;
						a.download = "收款收据";
						document.body.appendChild(a);
						a.click();
						document.body.removeChild(a);
					});
				},
			// #endif
			// #ifdef H5
				// 保存图片
				savepicture(Url){
					Url = this.imgUrl //图片路径，也可以传值进来
					var triggerEvent = "touchstart"; //指定下载方式
					var blob=new Blob([''], {type:'application/octet-stream'}); //二进制大型对象blob
					var url = URL.createObjectURL(blob); //创建一个字符串路径空位
					var a = document.createElement('a'); //创建一个 a 标签
					a.href = Url;  //把路径赋到a标签的href上
					//正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本
					a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0]; 
					/* var e = document.createEvent('MouseEvents');  //创建事件（MouseEvents鼠标事件）
					e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //初始化鼠标事件（initMouseEvent已弃用）*/
						
					//代替方法。创建鼠标事件并初始化（后面这些参数我也不清楚，参考文档吧 https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent）
					var e = new MouseEvent('click', ( true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));  
					//派遣后，它将不再执行任何操作。执行保存到本地
					a.dispatchEvent(e); 
					//释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
					URL.revokeObjectURL(url);
				},
			// #endif
		}
	}
	
</script>

<style>
	.receipt-for-collection{
		background-color: #F9F9F9;
		width: 100%; 
		/* padding-top: 30upx; */
	}
	.receipt-for-collection-btn{
		width: 602upx;
		color: rgba(255,255,255,1);
		margin-top: 50upx;
		font-size: 34upx;
		margin-bottom: 30upx;
		line-height: 80upx;
		border-radius: 60upx;
		background-size: 100%;
		background-image: url(https://tool.tuanhaoke.cn/static/image/shortvideo/parent-clues-header.png);
	}
	.text{
		color: #8C939D;
		font-size: 30upx;
		text-align: center;
	}
</style>
